<template>
  <div class="content">
    <vxe-toolbar ref="xToolbar" :loading="loading">
      <template #buttons>
        <vxe-button
          status="primary"
          content="新增"
          @click="insertEvent"
        ></vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      resizable
      show-overflow
      ref="xTable"
      height="500"
      :loading="loading"
      :data="tableData"
      :edit-rules="validRules"
      :edit-config="{
        trigger: 'dblclick',
        mode: 'row',
        showUpdateStatus: true,
        showInsertStatus: true,
      }"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column
        field="name"
        title="名字"
        :edit-render="{ name: 'input', attrs: { type: 'text' } }"
      ></vxe-column>
      <vxe-column
        field="nickname"
        title="昵称"
        :edit-render="{
          name: 'input',
          attrs: { type: 'text', placeholder: '请输入昵称' },
        }"
      ></vxe-column>
      <vxe-column
        field="sex"
        title="性别"
        :edit-render="{ name: '$select', options: sexList }"
      ></vxe-column>
      <vxe-column
        field="age"
        title="年龄"
        :edit-render="{ name: '$input', props: { type: 'float', digits: 2 } }"
      ></vxe-column>
      <vxe-column
        field="account"
        title="账号"
        :edit-render="{
          name: 'input',
          attrs: { type: 'text', placeholder: '请输入账号' },
        }"
      ></vxe-column>
      <vxe-column
        field="updateDate"
        title="创建时间"
        :edit-render="{
          name: '$input',
          props: { type: 'date', placeholder: '请选择日期' },
        }"
      ></vxe-column>
      <vxe-column title="操作">
        <template #default="{ row }">
          <vxe-button
            status="danger"
            content="删除"
            @click="deleteRowEvent(row)"
          ></vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-pager
      :layouts="[
        'Sizes',
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'FullJump',
        'Total',
      ]"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.total"
      @page-change="handlePageChange"
    >
    </vxe-pager>
  </div>
</template>

<script>
export default {
  name: "AccountList",
  data() {
    return {
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      tableData: [
        {
          name: "152515",
          nickname: "51515515",
          sex: "男",
          age: "20",
          account: "8654984",
          updateDate: "2021-01-01",
        },
        {
          name: "safsa",
          nickname: "csac",
          sex: "男",
          age: "15",
          account: "54154845",
          updateDate: "2021-10-01",
        },
        {
          name: "sdsac",
          nickname: "dscf",
          sex: "男",
          age: "50",
          account: "51852165",
          updateDate: "2021-01-05",
        },
        {
          name: "sdsac",
          nickname: "dscf",
          sex: "男",
          age: "50",
          account: "51852165",
          updateDate: "2021-01-05",
        },
        {
          name: "sdsac",
          nickname: "dscf",
          sex: "男",
          age: "50",
          account: "51852165",
          updateDate: "2021-01-05",
        },
        {
          name: "sdsac",
          nickname: "dscf",
          sex: "男",
          age: "50",
          account: "51852165",
          updateDate: "2021-01-05",
        },
        {
          name: "sdsac",
          nickname: "dscf",
          sex: "男",
          age: "50",
          account: "51852165",
          updateDate: "2021-01-05",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
        {
          name: "gfbv",
          nickname: "scds",
          sex: "男",
          age: "54",
          account: "8745125",
          updateDate: "2021-09-01",
        },
      ],
      sexList: [
        { label: "男", value: "1" },
        { label: "女", value: "0" },
      ],
      validRules: {
        name: [{ required: true, message: "名称必须填写" }],
      },
    };
  },
  created() {
    this.tablePage.total = this.tableData.length;
  },
  methods: {
    //添加数据
    async insertEvent() {
      const $table = this.$refs.xTable;
      const newRow = {
        name: "152515",
        nickname: "51515515",
        sex: "男",
        age: "20",
        account: "8654984",
        updateDate: "2021-01-01",
      };
      this.tableData.unshift(newRow); //第一位置添加
      await $table.reloadData(this.tableData); //加载数据并清除所有状态
      await $table.setActiveRow(newRow); //激活输入框
    },
    deleteRowEvent(val) {
      console.log(val);
      this.$msgbox({
        message: "您确定要删除吗",
        title: "确认删除",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
        type: "error",
      })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            message: "取消删除",
            type: "info",
          });
        });
    },
    //页面发生改变时所触发
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      //this.请求表格数据的函数
    },
  },
};
</script>

<style lang="less" scoped>
.content{
  width: 100% !important;
  height: 100%;
  .all{
  width: 100% !important;
}
}

</style>